<template>
  <div class="my-music">
    <div
        v-for="(item, index) in quantityTitle"
        class=" m-0 pb-2 pt-2 pl-1"
        :class="[myCreatePlaylist(route.matched[2].meta.title, item.title), 'yu-bgColor-hover-only']"
        @click="jumpSpecific(route.matched[1].children[index].path, item.title)"
    >
      <div class=" flex justify-between items-center">
        <span>{{ item.title }} ({{ quantityCollection[item.type] }})</span>
      </div>
    </div>
    <div>
      <div class="flex justify-between items-center">
        <span>我的歌单 ({{ quantityCollection.createdPlaylistCount }})</span>
        <yu-button @click="createPlaylistPopup">+ 创建</yu-button>
      </div>
      <ul>
        <li
            v-for="pt in playlists"
            :key="pt.id"
            @click="showPlaylistId(pt.id)"
            class="playlist-item flex mt-2 yu-bgColor-hover-only"
            :class="[route.query.id == pt.id ? 'yu-bgColor-active' : '']"
        >
          <div class="w-10 h-10 mr-2">
            <img style="width: 100%; height: 100%;" :src="pt.coverImgUrl" alt="">
          </div>
          <div class="flex flex-1 justify-between items-center">
            <div class="flex flex-col text-xs justify-between">
              <span>{{ pt.name }}</span>
              <span>{{ pt.trackCount }}首</span>
            </div>
            <div class="actions hidden" v-if="pt.specialType !== 5">
              <span class="i-mdi-file-edit-outline inline-block"
                    @click.stop="editPlaylist(pt.id)"
                    v-if="pt.creator?.userId === store.userInfo?.userId"></span>
              <span class="i-mdi-delete inline-block mr-2 ml-2" @click.stop="getPlaylistDeleteFn(pt.id)"></span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <new-song-list @newAddMusic="newAddMusic"/>
  </div>
</template>

<script setup>
import {reactive, toRefs} from "vue";
import {useStore} from "@/store/index";
import {useRoute, useRouter} from "vue-router";
import YuButton from '@/components/YuButton/index.vue'
import {getUserPlaylist} from "@/api/login/index";
import {getPlaylistDelete} from "@/api/radio/index";
import NewSongList from '@/components/NewSongList/index.vue'

const store = useStore()
const route = useRoute()
const router = useRouter()
// 我的歌手artistCount，
// 我的视频mvCount，
// 我的电台djRadioCount，
// 我的歌单（可以创建歌单）createdPlaylistCount
// 收藏的歌单subPlaylistCount
const data = reactive({
  quantityCollection: {},
  quantityTitle: [
    {
      title: '我的歌手',
      type: 'artistCount'
    },
    {
      title: '我的视频',
      type: 'mvCount'
    },
    {
      title: '我的电台',
      type: 'djRadioCount'
    }
  ],
  playlists: [] // 我的歌单
})

const {quantityCollection, quantityTitle, playlists} = toRefs(data)

// 获取数量
store.getMusicInfo().then(res => {
  delete res.code
  data.quantityCollection = res
})
// 判断是否是我创建的歌单
const myCreatePlaylist = (params, type) => {
  if (params === type) {
    return 'yu-bgColor-active'
  }
}

// 获取我的歌单
const getUserPlaylistA = () => {
  // uid可以随便传递由于由于传递了token有了身份
  getUserPlaylist({uid: 0}).then(res => {
    const {code, playlist} = res
    if (Number(code) === 200) {
      data.playlists = playlist
      console.log(playlist)
    }
  })
}
getUserPlaylistA()

// 跳转
const jumpSpecific = (path, title) => {
  if (title === '创建的歌单') return
  router.push({
    path
  })
}

// 显示歌单信息跳转
const showPlaylistId = (id) => {
  router.push({
    path: '/myMusic/createdPlaylist',
    query: {
      id
    }
  })
}
// 删除歌单
const getPlaylistDeleteFn = (id) => {
  getPlaylistDelete(id).then(res => {
    if (res.code === 200) getUserPlaylistA()
  })
}

// 新建歌单弹窗
const createPlaylistPopup = () => {
  store.newSongListPopup = true
}
// 创建歌单完成后关闭歌单，并且重新请求歌单列表
const newAddMusic = () => {
  getUserPlaylistA()
  store.newSongListPopup = false
}

// 跳转到编辑歌单信息页面
const editPlaylist = (id) => {
  router.push({
    path: 'edit',
    query: {
      id
    }
  })
}

</script>

<style scoped lang="scss">
.playlist-item {
  &:hover {
    .actions {
      display: inline-block;
      color: #000;
    }
  }
}
</style>
